import type { Metadata } from 'next';
import Link from 'next/link';
import { notFound } from 'next/navigation';
import { AdminTitle, Bool, JsonPre, Mono, StatusChip } from '@/components/admin/ui';
import { TierBadge } from '@/components/ui/badges';
import { DataTable, EmptyRow, Td, Th } from '@/components/ui/data-table';
import { KeyValue } from '@/components/ui/key-value';
import { LiveAgo } from '@/components/ui/live';
import { Unavailable } from '@/components/ui/unavailable';
import { adminApi, load, requireAdmin } from '@/lib/admin/admin-api';
import type { AdminSnapshotRow } from '@/lib/admin/types';
import { fmtBytes, fmtDateTime, fmtInt, num } from '@/lib/format';
import { routes } from '@/lib/site';

export const metadata: Metadata = { title: 'Document', robots: { index: false, follow: false } };
export const dynamic = 'force-dynamic';

export default async function AdminDocumentPage({ params }: { params: Promise<{ id: string }> }) {
  await requireAdmin();
  const { id } = await params;
  const res = await load(adminApi.document(id));
  if (!res.ok && res.error.startsWith('404')) notFound();
  if (!res.ok) {
    return (
      <>
        <AdminTitle title="Document" />
        <Unavailable what="Document" reason={res.error} />
      </>
    );
  }
  const d = res.data;
  const snaps: AdminSnapshotRow[] = Array.isArray(d.snapshots) ? d.snapshots : [];
  const meta = { ...(d.meta ?? {}) } as Record<string, unknown>;
  delete meta.raw_path;
  delete meta.text_path;
  return (
    <>
      <p className="mb-2 text-xs"><Link href="/admin/documents" className="link">← Documents</Link></p>
      <AdminTitle title={d.title ?? d.url.replace(/^https?:\/\/(www\.)?/, '')} lede={<Mono>{d.id}</Mono>} />
      <div className="grid gap-8 lg:grid-cols-[minmax(0,1fr)_20rem]">
        <div className="min-w-0">
          <KeyValue
            dense
            rows={[
              { key: 'url', label: 'URL', value: <a href={d.url} target="_blank" rel="noopener noreferrer" className="link break-all">{d.url}</a> },
              { key: 'canonical_url', label: 'Canonical', raw: d.canonical_url },
              { key: 'connector', label: 'Connector', value: <Link href={`/admin/documents?connector=${encodeURIComponent(d.connector_name ?? '')}`} className="mono text-xs hover:text-accent">{d.connector_name ?? '—'}</Link> },
              { key: 'source', label: 'Source', value: <span className="text-sm">{d.source_name ?? d.source_id ?? '—'} {d.source_tier !== undefined && d.source_tier !== null && <TierBadge tier={num(d.source_tier)} />}</span> },
              { key: 'doc_type', label: 'Type', raw: d.doc_type },
              { key: 'entity', label: 'Entity', value: d.entity_slug && d.entity_type ? <Link href={routes.entity({ entity_type: d.entity_type, slug: d.entity_slug })} className="link">{d.entity_name ?? d.entity_slug}</Link> : <span className="text-ink-3">—</span> },
              { key: 'status', label: 'Status', value: <StatusChip value={d.status} /> },
              { key: 'processing', label: 'Processing', value: <StatusChip value={d.last_processing_status ?? null} /> },
              { key: 'first_seen_at', label: 'First seen', raw: d.first_seen_at ? fmtDateTime(d.first_seen_at) : null },
              { key: 'last_fetched_at', label: 'Last fetched', raw: d.last_fetched_at ? fmtDateTime(d.last_fetched_at) : null },
              { key: 'last_changed_at', label: 'Last changed', raw: d.last_changed_at ? fmtDateTime(d.last_changed_at) : null },
              { key: 'next_fetch_at', label: 'Next fetch', raw: d.next_fetch_at ? fmtDateTime(d.next_fetch_at) : null },
              { key: 'counts', label: 'Fetch / change / fail', value: <span className="tnum">{fmtInt(d.fetch_count)} / {fmtInt(d.change_count)} / {fmtInt(d.fail_count)}</span> },
              { key: 'last_status', label: 'Last HTTP', raw: d.last_status },
              { key: 'etag', label: 'ETag', value: d.etag ? <Mono>{d.etag}</Mono> : undefined },
              { key: 'content_hash', label: 'Content hash', value: d.content_hash ? <Mono className="break-all">{d.content_hash}</Mono> : undefined },
              { key: 'priority', label: 'Priority', raw: d.priority },
              { key: 'needs_llm', label: 'Needs LLM', value: <Bool v={d.needs_llm} /> },
            ]}
          />
        </div>
        <aside className="min-w-0">
          <p className="eyebrow mb-2">Meta</p>
          <JsonPre value={Object.keys(meta).length ? meta : null} maxHeight="20rem" />
        </aside>
      </div>

      <section className="mt-8">
        <p className="eyebrow mb-2">Snapshots <span className="tnum text-ink-3">{snaps.length}</span></p>
        <DataTable compact scroll caption="Snapshots">
          <thead>
            <tr>
              <Th>Observed</Th>
              <Th num>HTTP</Th>
              <Th num>Bytes</Th>
              <Th>Changed</Th>
              <Th>Processing</Th>
              <Th>Parser</Th>
              <Th>Transport</Th>
              <Th>Structured</Th>
              <Th>Text</Th>
              <Th>Run</Th>
            </tr>
          </thead>
          <tbody>
            {snaps.length === 0 && <EmptyRow cols={10}>No snapshots archived for this document.</EmptyRow>}
            {snaps.map((s) => (
              <tr key={s.id}>
                <Td>
                  <Link href={`/admin/snapshots/${encodeURIComponent(s.id)}`} className="text-xs text-ink hover:text-accent" title={s.id}>
                    {fmtDateTime(s.observed_at)} · <LiveAgo at={s.observed_at} />
                  </Link>
                </Td>
                <Td num className={`tnum text-xs ${(num(s.http_status) ?? 0) >= 400 ? 'text-danger' : ''}`}>{fmtInt(s.http_status)}</Td>
                <Td num className="tnum text-xs">{fmtBytes(s.byte_size)}</Td>
                <Td><Bool v={s.changed} /></Td>
                <Td><StatusChip value={s.processing_status} /></Td>
                <Td><Mono>v{s.parser_version ?? '?'}</Mono></Td>
                <Td><Mono>{s.transport ?? '—'}</Mono></Td>
                <Td><Bool v={s.has_structured} /></Td>
                <Td><Bool v={s.has_text} /></Td>
                <Td>{s.run_id ? <Mono>{s.run_id}</Mono> : <span className="text-ink-3">—</span>}</Td>
              </tr>
            ))}
          </tbody>
        </DataTable>
      </section>
    </>
  );
}